<template>
  <!-- 歌单评论 -->
  <div class="comment">
    <h2>歌单评论</h2>
    <slot name="hotcomment">
      <div class="praise">
        <h4>精彩评论</h4>
        <div v-if="comhot.lenght >= 1">
          <van-card
            v-for="item in comhot"
            :key="item.commentId"
            price="2.00"
            :desc="gettime(item.time)"
          >
            <template #thumb>
              <img :src="item.user.avatarUrl" alt="" />
            </template>
            <template #title>
              <div class="aa">
                <div class="left">
                  <span> {{ item.user.nickname }}</span>
                  <span
                    :class="{ bg: item.user.vipRights.associator.rights }"
                  ></span>
                </div>
                <div class="right">
                  <span class="cum">{{ item.likedCount }}</span>
                  <van-icon name="good-job-o" />
                </div>
              </div>
            </template>
            <template #price>
              {{ item.content }}
            </template>
          </van-card>
        </div>
        <div v-else>
          <div class="Null">没有评论</div>
        </div>
      </div>
    </slot>
    <slot name="newcomment">
      <div class="praise">
        <h4>最新评论</h4>
        <van-card
          v-for="item in newcom"
          :key="item.commentId"
          price="2.00"
          :desc="gettime(item.time)"
        >
          <template #thumb>
            <img :src="item.user.avatarUrl" alt="" />
          </template>
          <template #title>
            <div class="aa">
              <div class="left">
                <span> {{ item.user.nickname }}</span>
                <span :class="{ bg: item.user.vipRights }"></span>
              </div>
              <div class="right">
                <span class="cum">{{ item.likedCount }}</span>
                <van-icon name="good-job-o" />
              </div>
            </div>
          </template>
          <template #price>
            {{ item.content }}
          </template>
        </van-card>
      </div>
    </slot>
    <!-- 发表评论 -->
    <van-field
      v-model="value"
      autosize
      rows="1"
      right-icon="smile-o"
      type="textarea"
      placeholder="听了这么多,可能有你想说"
    >
      <template #button>
        <van-button size="small" type="primary" @click="postComments"
          >发送</van-button
        >
      </template>
    </van-field>
  </div>
</template>
<script>
import { getCom, postComments } from '@/api/comment'
import { Toast } from 'vant'
export default {
  props: ['id'],
  data: () => ({
    value: '',
    newcom: [],
    comhot: [],
    src: null,
    offset: 0
  }),
  created() {
    this.getCom()
  },
  methods: {
    async getCom() {
      // ++this.offset
      const res = await getCom(this.id)
      // console.log(res)
      this.newcom = res.data.comments
      this.comhot = res.data.hotComments
    },
    gettime(time) {
      return new Date(time).toLocaleString()
    },
    async postComments() {
      await postComments({ id: this.id, txt: this.vlaue })
      if (this.value) {
        this.newcom.unshift({
          content: this.value,
          time: new Date(),
          likedCount: null,
          user: {
            avatarUrl: 'https://img1.baidu.com/it/u=1153639289,3598981143&fm=26&fmt=auto&gp=0.jpg',
            nickname: sessionStorage.user || 'No.1-Yang'
          }
        })
        this.value = ""
      } else {
        Toast('你什么都还没说呢')
        return
      }
    }
  }
}
</script>
<style lang="less">
.comment {
  padding-bottom: 60px;
  .praise {
    .Null {
      padding: 20px;
      text-align: center;
    }
    h4 {
      padding: 0 10px;
      height: 23px;
      line-height: 23px;
      margin: 0;
      padding: 4px 10px;
      color: #666;
      font-size: 12px;
      font-weight: 400;
      background: rgba(0, 0, 0, 0.05);
    }
    .van-card__thumb {
      height: 60px;
      width: 40px;
      img {
        border-radius: 50%;
        width: 100%;
      }
    }
    .van-card__content {
      min-height: 60px;
    }
    .aa {
      display: flex;
      font-size: 13px;
      justify-content: space-between;
      .left {
        display: flex;
      }
      .right {
        display: flex;
        height: 20px;
        // border: 1px solid #000;
        justify-content: space-between;
        .cum {
          font-size: 11px;
          color: #999;
          // line-height: 10px;
          margin-top: 2px;
          margin-right: 5px;
        }
        .van-icon-good-job-o {
          font-size: 18px;
          color: #ccc;
        }
      }
      .bg {
        display: block;
        margin: 4px;
        width: 32px;
        height: 11px;
        background: url("https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923065/dc4e/2b9c/7677/20a6644c6e3a093d7accce919ae7b169.png")
          no-repeat center/100%;
      }
    }
    .van-card__price {
      font-size: 14px;
    }
  }
  .van-cell {
    position: fixed;
    bottom: 0px;
    width: 80%;
    .van-icon-smile-o {
      font-size: 24px;
    }
  }
}
</style>